<template>
  <el-tag :type="tagType" :size="size" :effect="effect">
    {{ displayText }}
  </el-tag>
</template>

<script setup lang="ts">
import { getScoreTagType } from '@/utils/eval'

interface Props {
  /** 分数 */
  score: number
  /** 满分 */
  maxScore: number
  /** 显示模式 */
  mode?: 'score' | 'rate' | 'both'
  /** 标签大小 */
  size?: 'large' | 'default' | 'small'
  /** 标签效果 */
  effect?: 'dark' | 'light' | 'plain'
  /** 小数位数 */
  precision?: number
}

const props = withDefaults(defineProps<Props>(), {
  mode: 'score',
  size: 'default',
  effect: 'light',
  precision: 1
})

/** 得分率 */
const scoreRate = computed(() => {
  if (!props.maxScore || props.maxScore === 0) return 0
  return (props.score / props.maxScore) * 100
})

/** 显示文本 */
const displayText = computed(() => {
  switch (props.mode) {
    case 'score':
      return props.score.toString()
    case 'rate':
      return `${scoreRate.value.toFixed(props.precision)}%`
    case 'both':
      return `${props.score}分 (${scoreRate.value.toFixed(props.precision)}%)`
    default:
      return props.score.toString()
  }
})

/** 标签类型 */
const tagType = computed(() => {
  return getScoreTagType(props.score, props.maxScore)
})
</script>
